<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息查询系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        gray: {
                            50: '#F5F7FA',
                            100: '#E5E6EB',
                            200: '#C9CDD4',
                            300: '#86909C',
                            400: '#4E5969',
                            500: '#272E3B',
                            600: '#1D2129',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans min-h-screen">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-600">学生信息查询系统</h1>
            </div>
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#" class="text-primary font-medium">首页</a>
                <a href="#" class="text-gray-400 hover:text-primary transition-colors">信息管理</a>
                <a href="#" class="text-gray-400 hover:text-primary transition-colors">系统设置</a>
                <a href="#" class="text-gray-400 hover:text-primary transition-colors">帮助中心</a>
            </nav>
            <button class="md:hidden text-gray-500">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <div class="mb-8 text-center">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-600 mb-2">学生信息查询</h2>
            <p class="text-gray-400 max-w-2xl mx-auto">通过以下方式快速查询学生信息，支持ID查询、状态筛选和姓名搜索</p>
        </div>

        <!-- 查询区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- ID查询卡片 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <div class="flex items-center space-x-3 mb-4">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-id-card text-primary"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-600">按ID查询</h3>
                </div>
                <form id="idQueryForm" class="space-y-4">
                    <div>
                        <label for="studentId" class="block text-sm font-medium text-gray-500 mb-1">学生ID</label>
                        <input 
                            type="text" 
                            id="studentId" 
                            placeholder="请输入学生ID" 
                            class="w-full px-4 py-2 border border-gray-200 rounded-lg input-focus"
                            required
                        >
                    </div>
                    <button 
                        type="submit" 
                        class="w-full bg-primary text-white py-2.5 px-4 rounded-lg font-medium btn-hover flex items-center justify-center space-x-2"
                    >
                        <i class="fa fa-search"></i>
                        <span>查询</span>
                    </button>
                </form>
            </div>

            <!-- 状态查询卡片 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <div class="flex items-center space-x-3 mb-4">
                    <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center">
                        <i class="fa fa-filter text-secondary"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-600">按状态查询</h3>
                </div>
                <form id="statusQueryForm" class="space-y-4">
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-500 mb-1">学生状态</label>
                        <select 
                            id="status" 
                            class="w-full px-4 py-2 border border-gray-200 rounded-lg input-focus"
                            required
                        >
                            <option value="" disabled selected>请选择状态</option>
                            <option value="1">正常</option>
                            <option value="0">已删除</option>
                        </select>
                    </div>
                    <button 
                        type="submit" 
                        class="w-full bg-secondary text-white py-2.5 px-4 rounded-lg font-medium btn-hover flex items-center justify-center space-x-2"
                    >
                        <i class="fa fa-check-circle"></i>
                        <span>筛选</span>
                    </button>
                </form>
            </div>

            <!-- 姓名查询卡片 -->
            <div class="bg-white rounded-xl p-6 card-shadow">
                <div class="flex items-center space-x-3 mb-4">
                    <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center">
                        <i class="fa fa-user text-success"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-600">按姓名查询</h3>
                </div>
                <form id="nameQueryForm" class="space-y-4">
                    <div>
                        <label for="studentName" class="block text-sm font-medium text-gray-500 mb-1">学生姓名</label>
                        <input 
                            type="text" 
                            id="studentName" 
                            placeholder="请输入学生姓名" 
                            class="w-full px-4 py-2 border border-gray-200 rounded-lg input-focus"
                            required
                        >
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <button 
                            type="submit" 
                            name="method" 
                            value="path" 
                            class="bg-success text-white py-2.5 px-4 rounded-lg font-medium btn-hover flex items-center justify-center space-x-1"
                        >
                            <i class="fa fa-link text-xs"></i>
                            <span>路径参数</span>
                        </button>
                        <button 
                            type="submit" 
                            name="method" 
                            value="query" 
                            class="bg-gray-100 text-gray-600 py-2.5 px-4 rounded-lg font-medium btn-hover flex items-center justify-center space-x-1"
                        >
                            <i class="fa fa-question-circle text-xs"></i>
                            <span>查询参数</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 结果展示区域 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-lg font-semibold text-gray-600">查询结果</h3>
                <button id="clearResult" class="text-gray-400 hover:text-danger transition-colors">
                    <i class="fa fa-times mr-1"></i>清除结果
                </button>
            </div>
            
            <!-- 单条结果展示 -->
            <div id="singleResult" class="hidden">
                <div class="border border-gray-100 rounded-lg p-6 bg-gray-50">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 id="singleResultName" class="text-xl font-bold text-gray-600"></h4>
                            <p id="singleResultId" class="text-sm text-gray-400"></p>
                        </div>
                        <span id="singleResultStatus" class="px-3 py-1 rounded-full text-xs font-medium"></span>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div class="flex items-center space-x-3">
                            <i class="fa fa-users text-gray-300"></i>
                            <div>
                                <p class="text-sm text-gray-400">班级</p>
                                <p id="singleResultClass" class="text-gray-600"></p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fa fa-book text-gray-300"></i>
                            <div>
                                <p class="text-sm text-gray-400">专业</p>
                                <p id="singleResultMajor" class="text-gray-600"></p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fa fa-phone text-gray-300"></i>
                            <div>
                                <p class="text-sm text-gray-400">电话</p>
                                <p id="singleResultPhone" class="text-gray-600"></p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fa fa-envelope text-gray-300"></i>
                            <div>
                                <p class="text-sm text-gray-400">邮箱</p>
                                <p id="singleResultEmail" class="text-gray-600"></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border-t border-gray-100 pt-4 text-sm text-gray-400 flex justify-between">
                        <p id="singleResultCreateTime"></p>
                        <p id="singleResultUpdateTime"></p>
                    </div>
                </div>
            </div>

            <!-- 多条结果展示 -->
            <div id="multipleResults" class="hidden overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-100">
                    <thead>
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">学生ID</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">姓名</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">班级</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">专业</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">电话</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">状态</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody id="resultsTableBody" class="bg-white divide-y divide-gray-50"></tbody>
                </table>
                <div id="noResults" class="py-12 text-center hidden">
                    <i class="fa fa-search text-gray-200 text-4xl mb-3"></i>
                    <p class="text-gray-400">暂无符合条件的学生信息</p>
                </div>
            </div>

            <!-- 初始状态 -->
            <div id="initialState" class="py-16 text-center">
                <i class="fa fa-database text-gray-200 text-5xl mb-4"></i>
                <h4 class="text-gray-400 mb-2">请选择查询方式</h4>
                <p class="text-gray-300 text-sm">查询结果将显示在这里</p>
            </div>

            <!-- 加载状态 -->
            <div id="loadingState" class="py-16 text-center hidden">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary mb-4"></div>
                <p class="text-gray-400">正在查询，请稍候...</p>
            </div>

            <!-- 错误状态 -->
            <div id="errorState" class="py-12 border border-danger/20 rounded-lg bg-danger/5 p-6 hidden">
                <div class="flex items-start">
                    <i class="fa fa-exclamation-circle text-danger text-xl mt-0.5 mr-3"></i>
                    <div>
                        <h4 class="text-danger font-medium mb-1">查询失败</h4>
                        <p id="errorMessage" class="text-gray-500 text-sm"></p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white mt-12 py-6 border-t border-gray-100">
        <div class="container mx-auto px-4 text-center text-gray-400 text-sm">
            <p>© 2023 学生信息查询系统 - 版权所有</p>
            <p class="mt-1">技术支持：<a href="#" class="text-primary hover:underline">联系我们</a></p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 表单提交事件处理
            document.getElementById('idQueryForm').addEventListener('submit', function(e) {
                e.preventDefault();
                const studentId = document.getElementById('studentId').value;
                queryStudentById(studentId);
            });

            document.getElementById('statusQueryForm').addEventListener('submit', function(e) {
                e.preventDefault();
                const status = document.getElementById('status').value;
                queryStudentsByCondition(status);
            });

            document.getElementById('nameQueryForm').addEventListener('submit', function(e) {
                e.preventDefault();
                const name = document.getElementById('studentName').value;
                const method = e.submitter.value; // 获取点击的按钮值
                queryStudentsByName(name, method);
            });

            // 清除结果按钮
            document.getElementById('clearResult').addEventListener('click', clearResults);

            // 根据ID查询学生
            function queryStudentById(studentId) {
                showLoading();
                fetch(`/getStudentById/${studentId}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! Status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data) {
                            showSingleResult(data);
                        } else {
                            showNoResults();
                        }
                    })
                    .catch(error => {
                        showError(`查询失败：${error.message}`);
                    });
            }

            // 根据状态查询学生
            function queryStudentsByCondition(status) {
                showLoading();
                fetch(`/getStudentsByCondition/${status}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! Status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (Array.isArray(data) && data.length > 0) {
                            showMultipleResults(data);
                        } else {
                            showNoResults();
                        }
                    })
                    .catch(error => {
                        showError(`查询失败：${error.message}`);
                    });
            }

            // 根据姓名查询学生
            function queryStudentsByName(name, method) {
                showLoading();
                let url;
                if (method === 'path') {
                    url = `/getStudentsByName/${encodeURIComponent(name)}`;
                } else {
                    url = `/getStudentsByName?name=${encodeURIComponent(name)}`;
                }
                
                fetch(url)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! Status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (Array.isArray(data) && data.length > 0) {
                            showMultipleResults(data);
                        } else {
                            showNoResults();
                        }
                    })
                    .catch(error => {
                        showError(`查询失败：${error.message}`);
                    });
            }

            // 显示单条结果
            function showSingleResult(student) {
                hideAllResults();
                document.getElementById('singleResult').classList.remove('hidden');
                
                // 填充数据
                document.getElementById('singleResultName').textContent = student.name || '未设置';
                document.getElementById('singleResultId').textContent = `ID: ${student.studentId}`;
                document.getElementById('singleResultClass').textContent = student.className || '-';
                document.getElementById('singleResultMajor').textContent = student.major || '-';
                document.getElementById('singleResultPhone').textContent = student.phone || '-';
                document.getElementById('singleResultEmail').textContent = student.email || '-';
                document.getElementById('singleResultCreateTime').textContent = `创建时间: ${formatDateTime(student.createTime)}`;
                document.getElementById('singleResultUpdateTime').textContent = `更新时间: ${formatDateTime(student.updateTime)}`;
                
                // 设置状态标签
                const statusElement = document.getElementById('singleResultStatus');
                if (student.status === 1) {
                    statusElement.textContent = '正常';
                    statusElement.className = 'px-3 py-1 rounded-full text-xs font-medium bg-success/10 text-success';
                } else {
                    statusElement.textContent = '已删除';
                    statusElement.className = 'px-3 py-1 rounded-full text-xs font-medium bg-danger/10 text-danger';
                }
            }

            // 显示多条结果
            function showMultipleResults(students) {
                hideAllResults();
                document.getElementById('multipleResults').classList.remove('hidden');
                
                const tableBody = document.getElementById('resultsTableBody');
                tableBody.innerHTML = '';
                
                students.forEach(student => {
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-gray-50 transition-colors';
                    
                    row.innerHTML = `
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.studentId}</td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">${student.name || '-'}</td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.className || '-'}</td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.major || '-'}</td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">${student.phone || '-'}</td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${student.status === 1 ? 'bg-success/10 text-success' : 'bg-danger/10 text-danger'}">
                                ${student.status === 1 ? '正常' : '已删除'}
                            </span>
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap text-sm">
                            <button class="text-primary hover:text-primary/80 mr-3" onclick="queryStudentById('${student.studentId}')">
                                <i class="fa fa-eye mr-1"></i>查看
                            </button>
                        </td>
                    `;
                    
                    tableBody.appendChild(row);
                });
            }

            // 显示无结果
            function showNoResults() {
                hideAllResults();
                document.getElementById('multipleResults').classList.remove('hidden');
                document.getElementById('noResults').classList.remove('hidden');
            }

            // 显示加载状态
            function showLoading() {
                hideAllResults();
                document.getElementById('loadingState').classList.remove('hidden');
            }

            // 显示错误信息
            function showError(message) {
                hideAllResults();
                document.getElementById('errorState').classList.remove('hidden');
                document.getElementById('errorMessage').textContent = message;
            }

            // 清除结果
            function clearResults() {
                hideAllResults();
                document.getElementById('initialState').classList.remove('hidden');
                
                // 清空表单
                document.getElementById('idQueryForm').reset();
                document.getElementById('statusQueryForm').reset();
                document.getElementById('nameQueryForm').reset();
            }

            // 隐藏所有结果区域
            function hideAllResults() {
                document.getElementById('initialState').classList.add('hidden');
                document.getElementById('singleResult').classList.add('hidden');
                document.getElementById('multipleResults').classList.add('hidden');
                document.getElementById('noResults').classList.add('hidden');
                document.getElementById('loadingState').classList.add('hidden');
                document.getElementById('errorState').classList.add('hidden');
            }

            // 格式化日期时间
            function formatDateTime(dateTime) {
                if (!dateTime) return '-';
                // 处理ISO格式日期
                const date = new Date(dateTime);
                if (isNaN(date.getTime())) return dateTime;
                
                return date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });
            }

            // 暴露给全局，用于表格内查看按钮
            window.queryStudentById = queryStudentById;
        });
    </script>
</body>
</html>